<template>
    <div class="totalInfo">
        <Card>
            <h2>合计信息</h2>
            <Row style="padding-left: 20px;">
                <ul>
                    <li>
                        <span>合同总价格 : </span>
                        <div class="amt">
                            <div v-if="totalInfo.newValue.totalcontAmt">
                                <Input v-model="totalInfo.newValue.totalcontAmt" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan" style="line-height: 24px;">元</span>
                            </div>
                            <div>
                                <span>{{totalInfo.oldValue.totalcontAmt}}<b style="font-weight: normal;">元</b></span>
                            </div>
                        </div>
                    </li> 
                    <li>
                        <span>首付款总额 : </span>
                        <div class="amt">
                            <div v-if="totalInfo.newValue.totalFirstAmt">
                                <Input v-model="totalInfo.newValue.totalFirstAmt" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan" style="line-height: 24px;">元</span>
                            </div>
                            <div>
                                <span>{{totalInfo.oldValue.totalFirstAmt}}</span><b style="font-weight: normal;">元</b>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>利息总额: </span>
                        <div class="amt">
                            <div v-if="totalInfo.newValue.totalInterest">
                                <Input v-model="totalInfo.newValue.totalInterest" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan">元</span>
                            </div>
                            <div>
                                <span>{{totalInfo.oldValue.totalInterest}}<b style="font-weight: normal;">元</b></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>贷款总额: </span>
                        <div class="amt">
                            <div v-if="totalInfo.newValue.totalLoanAmt">
                                <Input v-model="totalInfo.newValue.totalLoanAmt" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan" style="line-height: 24px;">元</span>
                            </div>
                            <div>
                                <span>{{totalInfo.oldValue.totalLoanAmt}}<b style="font-weight: normal;">元</b></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>贴息总额: </span>
                        <div class="amt">
                            <div>
                                <Input v-model="totalInfo.newValue.totalDiscountAmt" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan" style="line-height: 24px;">元</span>
                            </div>
                            <div>
                                <span>{{totalInfo.oldValue.totalDiscountAmt}}<b style="font-weight: normal;">元</b></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span>月供总额: </span>
                        <div class="amt">
                            <div v-if="totalInfo.newValue.totalRent">
                                <Input v-model="totalInfo.newValue.totalRent" style="width:80px" placeholder="" :readonly="readonly"/>
                                <span class="commonSpan" style="line-height: 24px;">元</span>
                            </div>
                            <div>
                                <span>{{totalInfo.oldValue.totalRent}}<b style="font-weight: normal;">元</b></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </Row>
        </Card>
    </div>
</template>
<script>
export default {
    name:"totalInfo",
    data(){
        return{
            readonly:true,
            maxValue:200,
            proessModel:false,
            totalInfo:{
                newValue:{
                },
                oldValue:{
                },
            },
        }
    },
    props:{
        totalInfoData:{
            type:Object,
        }
    },
    created(){
    },
    watch:{
        totalInfoData(val){
            if(Object.keys(val).length>0){
                let {newTotalInfo,oldTotalInfo}=val;
                this.totalInfo.newValue=newTotalInfo;
                this.totalInfo.oldValue=oldTotalInfo;
            }
        }
    },
    mounted(){
        console.log("金融产品页面-总计贷款")
    },
    methods:{
        cancelModel(){
            this.proessModel=false;
        },
        calculate(){
            this.proessModel=true;
        },
    }
}
</script>
<style scoped>
.totalInfo h2{
    font-size: 24px;
}
.totalInfo ul>li{
    margin-top: 10px;
}
.totalInfo ul>li>span{
    position: absolute;
    line-height: 24px;
}
.totalInfo ul>li .amt{
    margin-left: 80px;
}
.totalInfo ul>li .amt>div{
    display: inline-block;
}
.totalInfo ul>li .amt>div>span{
    line-height: 24px;
}
.totalInfo ul>li .amt>div:last-child{
    margin-left: 10px;
}
.commonSpan{
    position: absolute;
    margin-left: -16px;
}
.submit{
    margin-top: 50px;
    text-align: center;
}
 .submit>>>.ivu-btn-success{
    width:100px;
    height: 30px;
    background-color: green;

}
.submit>>>.ivu-btn-success:hover{
    background-color: green;
}
</style>